<template>
    <div>
        <div class="header-tool-buttons-container">
            <a-button style="margin-right: 10px;" v-if="this.$store.state.pageHtmlElements.length > 0 && this.$store.state.sqId === null" :enable="!publishing"
                      @click="publish(false)">发布
            </a-button>
            <a-button style="margin-right: 10px;" v-if="this.$store.state.pageHtmlElements.length > 0" :enable="!publishing"
                      @click="showIframeHtml">预览
            </a-button>
            <a-button v-if="this.$store.state.sqId !== null" @click="save">保存</a-button>
        </div>
        <div class="van-doc-simulator" style="border-top-left-radius: 0; border-top-right-radius: 0">
            <blank-place-holder v-if="this.$store.state.pageHtmlElements.length === 0" msg="请从左侧拖拽组件到此处" ></blank-place-holder>
            <div>
                <draggable tag="div"
                           class="drag-container"
                           v-model="elements"
                           group="label-components"
                           v-bind="dragOptions"
                           @start="drag = true"
                           @end="drag = false"
                           @change="onDragEnd"
                >
                    <div class="preview-box"
                         v-for="(item, index) in this.$store.state.pageHtmlElements" :key="index">
                        <component :is="item.preview.type" :style="item.data.style" :item="item">
                            <template #setting>
                                <setting-badge :item="item"></setting-badge>
                            </template>
                        </component>
                    </div>
                </draggable>
            </div>
        </div>
        <a-modal
                title=""
                :mask="true"
                :centered="true"
                okText="好的"
                :destroyOnClose="true"
                cancelText="取消"
                v-model="publishDialogVisible"
                @cancel="publishDialogVisible=false"
        >
            <i v-if="publishing" class="el-icon-loading"></i>
            <span v-if="publishing"> 发布中...</span>
            <p style="text-align: center" v-if="publishing === false">扫描下方二维码查看网页</p>
            <qrcode style="text-align: center" v-if="publishing === false" class="publish-qrcode" size="200" :value="qrcodeData"></qrcode>
        </a-modal>
        <form id="form1" style="display: none;" action="api/page/preview" target="iframe" method="post">
            <input type="hidden" name="data" v-model="htmlJson">
            <input type="hidden" name="page" v-model="pageConfigJson">
            <button type="submit" id="submitButton"></button>
        </form>
        <div :style="{
            display: iframeDialogVisible === true ? 'block' : 'none'
        }" @click="iframeDialogVisible = false" style="display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #080808;
    opacity: 0.8;
    z-index: 1000;" >
        </div>
        <iframe
                :style="{
            display: iframeDialogVisible === true ? 'block' : 'none',
            left: '50%',
            marginLeft: '-180px'
        }"
                style="
            box-shadow: none;
            border-width: 0;
            background: white;
            z-index: 1001;
            top: 40px;
            position: absolute;
" class="van-doc-simulator" id="xxx" name="iframe" src=""></iframe>
    </div>
</template>
<style scoped>
    .drag-container{
        min-height: 200px;
    }

    .drag-container .component-button-container{
        width: 100%;
        margin: 0;
        padding: 0;
    }
</style>
<script>
    import Draggable from 'vuedraggable'
    import HtmlTemplate from './HtmlTemplate'
    import BlankPlaceHolder from "../components/BlankPlaceHolder";
    import { mapState } from 'vuex'
    import Qrcode from 'qrcode.vue'
    import SettingBadge from './../components/global-config/component/component-setting-badge'


    export default {
        components: {
            Draggable,
            BlankPlaceHolder,
            HtmlTemplate,
            Qrcode,
            SettingBadge
        },
        methods: {
            async save() {
                await this.$post('/api/page/pub', {
                    sq_id: this.$store.state.sqId,
                    page : this.$store.state.pageGlobalConfig,
                    data: this.$store.state.pageHtmlElements,
                });
                this.$message.success('保存成功')
            },
            showIframeHtml() {
                this.iframeDialogVisible = true
                document.getElementById('form1').submit();
            },
            async publish(auth) {
                if (this.$store.state.loginUser === null && auth === false){
                    this.showPublishNoAuthConfirm();
                    return
                }
                this.publishing = true;
                try{
                    let data = await this.$post('/api/page/pub', {
                        sq_id: this.$store.state.sqId,
                        page : this.$store.state.pageGlobalConfig,
                        data:  this.$store.state.pageHtmlElements
                    });
                    this.publishDialogVisible = true;
                    this.publishing = false;
                    this.qrcodeData = data.url;
                    this.$store.commit('setSqId', data.sq_id)
                }catch {
                    this.publishDialogVisible = false;
                    this.publishing = false
                }
            },
            showPublishNoAuthConfirm() {
                let _this = this;
                this.$confirm({
                    title: '是否需要登录?',
                    content: '由于您当前未登录, 可能发布的页面无法查看统计数据等信息, 是否需要登录方便管理?',
                    okText: '去登录',
                    cancelText: '不用了,直接发布',
                    onOk() {
                        _this.$store.commit('showLoginModal',true)
                    },
                    onCancel() {
                        _this.publish(true)
                    },
                });
            },
            chooseCurrentBox(index, item) {
                this.$store.commit('setSelectedComponent', {
                    config: item.config,
                    data: item.data,
                });
                this.$store.commit('setComponentActiveTab', 0)
            },
            onDragEnd(event){
                if(event.added !== undefined){
                    let element = event.added.element
                    this.$store.commit('setSelectedComponent', {
                        config: element.config,
                        data: element.data
                    });
                    this.$store.commit('setComponentActiveTab', 0)
                }
            }
        },
        computed: {
            dragOptions() {
                return {
                    animation: 200,
                    group: "description",
                    disabled: false,
                    ghostClass: "ghost"
                };
            },
            htmlJson() {
                return JSON.stringify(this.$store.state.pageHtmlElements)
            },
            pageConfigJson(){
                return JSON.stringify(this.$store.state.pageGlobalConfig)
            },
            elements:{
                get () {
                    return this.$store.state.pageHtmlElements
                },
                set(value){
                    this.$store.commit('setPageHtmlElements', value)
                }
            }
        },
        data() {
            return {
                ...mapState([
                    "selectedComponent",
                    "pageHtmlElements"
                ]),
                drag: false,
                previewHtml: '',
                iframeDialogVisible: false,
                loginModalVisible : false,
                qrcodeData: {},
                publishing: false,
                publishDialogVisible: false
            }
        }
    }
</script>